<template>
  <div class="container">
    <TitleBox></TitleBox>  
    <div class="apply-box">
    <div class="apply-main">
      <ul>
        <li>
          <h3>我的姓名</h3>
          <input type="text" id="name" placeholder="请填写您的真实姓名">
        </li>
        <li>
          <h3>我的头衔</h3>
          <input type="text" id="job" placeholder="请填写您的职位或头衔">
        </li>
        <li class="jieshao">
          <h3>介绍一下我自己</h3>
          <textarea name="pro-self" id="introduce" cols="30" rows="8" placeholder="请填写几句话介绍自己（不超过50字）"></textarea>
          <span>35/50</span>
        </li>
        <li>
          <h3>专业领域</h3>
          <input type="text" id="area" placeholder="请填写您的专业领域">
        </li>
        <li>
          <h3>所在地</h3>
          <input type="text" id="place" placeholder="请选择您所在的省市">
        </li>
        <li>
          <h3>设置收费金额</h3>
          <input type="text" id="money" placeholder="请填写您的收费金额">
        </li>
        <li>
          <h3>资质证明</h3>
          <div class="file-lists">
            <img src="../assets/img/tx-a001.jpg">
          </div>
          <div class="file-lists">
            <img src="../assets/img/tx-a001.jpg">
          </div>
          <div class="file-area"></div>
        </li>
      </ul>
      <p>请上传名片，学生证，身份证或营业执照等相关证明，此项只用于审核，不会向其他会员公开展示</p>
      <a href="#" class="submit flex-box active">开始申请</a>
    </div>
  </div>
  </div>
</template>

<script>
// @ is an alias to /src
import TitleBox from '../components/TitleBox.vue'
export default {
  name: 'home',
  data() {
    return {
      lists: ''
    }
  },
  components: {
    TitleBox
  },
  computed: {},
  methods: {},
  mounted() {}
}
</script>
<style lang="scss" scoped>
.apply-box {
  max-width: 750px;
  margin: 0 auto;
  background: #fff;
  .apply-main {
    width: 100%;
    padding-left: r(15);
    padding-right: r(15);
    box-sizing: border-box;
    padding-bottom: r(36);
    ul {
      width: 100%;
      overflow: hidden;
      li {
        width: 100%;
        float: left;
        border-bottom: 1px solid #dedede;
        padding-bottom: r(14);
        &:last-child,
        &.jieshao {
          border-bottom: none;
        }
        &.jieshao {
          position: relative;
          span {
            position: absolute;
            bottom: r(40);
            right: r(6);
            font-size: r(11);
            color: #999999;
          }
        }
        h3 {
          font-size: r(14);
          line-height: r(18);
          color: #333333;
          margin-top: r(20);
          margin-bottom: r(20);
          padding-left: r(10);
          position: relative;
          &::before {
            width: 3px;
            height: r(16);
            background: #6dbbfe;
            content: '';
            display: block;
            position: absolute;
            top: 1px;
            left: 0;
            border-radius: 4px;
          }
        }
        input {
          width: 100%;
          height: auto;
          margin-bottom: 0;
          line-height: r(21);
          border: none;
          background: none;
          font-size: r(16);
          color: #666666;
          padding: 0;
        }
        input::-webkit-input-placeholder,
        textarea::-webkit-input-placeholder {
          color: #cccccc;
        }
        input::-moz-placeholder,
        textarea::-moz-placeholder {
          // Firefox19+
          color: #cccccc;
        }
        textarea {
          width: 100%;
          box-sizing: border-box;
          border-radius: r(6);
          border: 1px solid #dedede;
          font-size: r(16);
          padding: r(8);
          color: #666666;
          outline: none;
        }
        .file-area {
          width: r(100);
          height: r(100);
          background: #f2f2f2;
          border-radius: r(4);
          float: left;
          position: relative;
          &::before,
          &::after {
            position: absolute;
            content: '';
            height: 1px;
            width: r(40);
            top: 50%;
            left: r(30);
            background: #d8d8d8;
          }
          &::after {
            transform: rotateZ(90deg);
          }
        }
        .file-lists {
          height: r(100);
          float: left;
          width: r(100);
          background: #f2f2f2;
          border-radius: r(4);
          overflow: hidden;
          margin-right: r(12);
          margin-bottom: r(12);
          img {
            width: 100%;
          }
        }
      }
    }
    p {
      font-size: r(14);
      color: #cccccc;
      line-height: r(22);
    }
    .submit {
      width: 100%;
      height: r(50);
      border-radius: r(50);
      background: #ccc;
      font-size: r(16);
      color: #ffffff;
      text-align: center;
      text-decoration: none;
      margin-top: r(28);
    }
    .active {
      background: -webkit-linear-gradient(right, #86d1fc, #4ea4f7);
      background: linear-gradient(left, #86d1fc, #4ea4f7);
    }
  }
}
</style>
